<template>
	<Split v-model="split" min="0px">
		<div slot="left" class="split-atrr" ref="leftSplit">
			<Scroll ref="ivScroll" class="ivScrollb" :height="scrollHeight">
				<ul class="ui-design-content-ul" ref="contentScroll" id="designUi">
					<li class="designUili designUili1">
						<Button class="titleOnOff" size="large" type="text" @click="addClick">
							<Icon type="ios-add" size="28" />
							<span class="titleTip">新建</span>
						</Button>
					</li>
					<li
						class="designUili"
						v-for="(item,index) in pagesList"
						@mousemove="_move(index)"
						@mouseleave="_out(null)"
					>
						<div
							:class="{designColorLi:designColorLi==index}"
							class="designUiContent designUiContent1 designColorLi1"
							@click="listClick({data:item,num:index})"
						>
							<span class="deTitle">{{item.title}}</span>
							<div class="tips">
								<span
									v-if="isShow&&(indexShow2==index)"
									class="tips1"
									@click.stop="switchClick({data:item,num:index},1)"
								>
									<Button size="small">使用</Button>
								</span>
								<span
									v-if="ifUse(index)"
									class="tips1 tips2"
									@click.stop="switchClick({data:item,num:index},2)"
								>
									<span>使用中</span>
								</span>
							</div>
						</div>
					</li>
				</ul>
			</Scroll>
		</div>
		<div slot="right" class="split-atrr">
			<div class="wrapper">
				<div class="switchTitle">
					<div class="switchTitle1">
						<Button
							class="switchButton"
							:class="{switchButton2:switchButton2==index}"
							v-for="(item,index) in  buttonList"
							@click="buttonClick(item.type,index)"
						>
							<Icon :type="item.icon" size="16" class="design-icon" />
							{{item.title}}
						</Button>
					</div>
					<ui-add-modal v-model="add" @changeVal="changeVal2"></ui-add-modal>
					<ui-copy-modal v-model="copy" :datas="pagesContent" @changeVal="changeVal"></ui-copy-modal>
					<ui-edit-modal v-model="edit" :datas="pagesContent" @changeVal="changeVal1"></ui-edit-modal>
				</div>
				<div class="mainContent mainContent1">
					<div
						class="design-empy"
						v-if="!(JSON.stringify(pagesContent) != '{}'&&pagesContent.hasOwnProperty('layoutDetail')&&pagesContent.layoutDetail.length>0)"
					>
						<div class="empy-img"></div>
						<div style="textAlign:center;color:#C0C0C0">暂无内容</div>
					</div>
					<!-- <ui-design-board ></ui-design-board> -->
					<div
						class="design-preview-content"
						v-if="JSON.stringify(pagesContent) != '{}'&&pagesContent.hasOwnProperty('layoutDetail')&&pagesContent.layoutDetail.length>0"
					>
						<design-preview :table-data="pagesContent"></design-preview>
					</div>
				</div>
			</div>
		</div>
	</Split>
</template>

<script>
import uiDesignBoard from './ui-design-board.vue'
import uiCopyModal from './ui-design-copy.vue'
import uiEditModal from './ui-design-edit.vue'
import designPreview from '@/views/ui/components/preview/design-preview.vue'
import uiAddModal from './ui-design-add.vue'
import {
	graphicsPageAdd,
	gePageEdit,
	graphicsPage,
	gePageDetail,
	gePageDelete,
} from '@/api/uiDesign.js'
export default {
	name: 'ui-design-content',
	components: {
		uiDesignBoard,
		designPreview,
		uiCopyModal,
		uiEditModal,
		uiAddModal,
	},
	props: {
		isShow: {
			type: Boolean,
			default: true,
		},
		split: {
			type: String | Number,
			default: '240px',
		},
		indexShow: {
			type: Number | String,
			default: 0,
		},
		pagesId: {
			type: Number | String,
			default: '',
		},
	},
	data() {
		return {
			switchButton2: null,
			add: false,
			index: 0,
			pagesContent: {},
			pagesList: [],
			designColorLi: null,
			scrollHeight: '100%',
			scrollMain: true,
			indexShow1: null,
			indexShow2: null,
			copy: false,
			edit: false,
			buttonList: [
				{
					title: '编辑',
					type: 'edit',
					icon: 'ios-brush-outline',
				},
				{
					title: '复制',
					type: 'copy',
					icon: 'ios-copy-outline',
				},
				{
					title: '设计',
					type: 'design',
					icon: 'ios-color-palette-outline',
				},
				{
					title: '预览',
					type: 'preview',
					icon: 'ios-eye-outline',
				},
				{
					title: '删除',
					type: 'delete',
					icon: 'ios-trash-outline',
				},
			],
		}
	},
	watch: {
		indexShow(val) {
			this.indexShow1 = val
		},
		pagesContent(val) {
			console.log(val)
		},
		pagesId(val) {
			this.graphicsPage(val)
		},
	},
	computed: {},
	methods: {
		async graphicsPageAdd(item) {
			//新建页面添加
			let res = await graphicsPageAdd(item)
			if (res.success) {
				this.$Message.success(res.message)
				this.graphicsPage(this.pagesId)
			} else {
				this.$Message.error(res.message)
			}
		},
		async gePageEdit(item) {
			//编辑
			let res = await gePageEdit(item)
			if (res.success) {
				this.pagesList.forEach((element, index) => {
					if (element.id == item.id) {
						let id = document.getElementById('designUi')
						let li = id.getElementsByTagName('li')[index + 1]
							.children[0].children[0]
						li.innerHTML = item.title
					}
				})
				this.graphicsPage(this.pagesId)
			} else {
				this.$Message.error(res.message)
			}
		},
		async graphicsPage(id) {
			//通过组织结构获取界面列表
			let res = await graphicsPage({ orgId: id })
			if (res.success) {
				this.pagesList = res.result.records
			}
		},
		async gePageDetail(id) {
			//查看（根据id获取界面数据）
			let res = await gePageDetail({ id: id })
			if (res.success) {
				this.pagesContent = res.result
				console.log(this.pagesContent)
			} else {
				this.$message.error(res.message)
			}
    },
    async getPageCopy(item){
         let res = await  getPageCopy(item)
         	if (res.success) {
					this.$Message.success(res.message)
				//this.graphicsPage(this.pagesId)
			} else {
				this.$Message.error(res.message)
			}
    },
		async gePageDelete(id) {
			//删除界面
			let res = await gePageDelete({ id: id })
			if (res.success) {
				this.$Message.success(res.message)
				this.designColorLi = null
				this.graphicsPage(this.pagesId)
				this.pagesContent = {}
			} else {
				this.$message.error(res.message)
			}
		},
		changeVal2(val) {
			this.add = val.modal
			if (val.button) {
				//确定
				this.graphicsPageAdd(val.form)
			}
		},
		ifUse(index) {
			if (
				this.isShow &&
				this.indexShow1 == index &&
				this.indexShow2 != index
			) {
				return true
			} else {
				return false
			}
		},
		_move(index) {
			this.indexShow2 = index
		},
		_out(index) {
			this.indexShow2 = index
		},
		addClick() {
			this.add = true
		},
		listClick(val, item) {
			this.designColorLi = val.num
			// this.$emit("listClick",val)
			this.gePageDetail(val.data.id)
		},
		switchClick(val, item) {
			if (item == 1) {
				this.$emit('designChange', val)
			} else if (item == 2) {
				this.$emit('designChange', val)
			}
		},
		buttonClick(type, index) {
			if (JSON.stringify(this.pagesContent) == '{}') {
				this.$Message.error('请选择操作页面!')
				return
			}
			if (type == 'copy') {
				this.copy = true
			} else if (type == 'edit') {
				this.edit = true
			} else if (type == 'preview') {
				if (this.pagesContent.id) {
					this.setStore('preview', this.pagesContent)
					this.$router.push({
						path: '/design-preview',
					})
				} else {
					this.$Message.error('请选中操作界面!')
				}
			} else if (type == 'design') {
				if (this.pagesContent.id) {
          		this.setStore('designBoard', this.pagesContent)
					this.$router.push({
						path: '/design-board',
					})
				} else {
					this.$Message.error('请选中操作界面!')
				}
			} else if (type == 'delete') {
				if (this.pagesContent.id) {
					this.gePageDelete(this.pagesContent.id)
				} else {
					this.$Message.error('请选中删除界面!')
				}
			}
			this.switchButton2 = index
		},
		changeVal(val) {
			this.copy = val.modal
			if (val.button) {
				//确定
			}
		},
		changeVal1(val) {
			this.edit = val.modal
			if (val.button) {
				//确定

				this.gePageEdit(val.form)
			}
		},
		scrollHeightChange(val) {
			//滚动条 出现 收起
			if (val == 1) {
				if (
					this.$refs.leftSplit.clientHeight >
					this.$refs.contentScroll.clientHeight
				)
					return //如果没有超出  滚动条不显示
				this.scrollMain = false
			} else if (val == 2) {
				this.scrollMain = true
			}
		},
	},
	created() {},
	mounted() {
		this.indexShow1 = this.indexShow
		this.scrollHeight = this.$refs.leftSplit.clientHeight
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	background: white;
	padding-top: 16px;
}
.design-preview-content {
	width: 100%;
	height: 100%;
	padding-left: 6px;
}
.switchTitle {
	height: 50px;
	padding: 0 16px;
}
.switchTitle1 {
	padding-top: 2px;
}
.switchButton {
	border: none;
	outline: none;
	box-shadow: none;
}
.switchButton:hover {
	background: #2d8cf0;
	color: #ffffff;
}
// .switchButton2{
//     background:#2d8cf0  ;
//   color: #ffffff;
// }
.mainContent {
	border: 1px solid rgba(220, 222, 226, 1);
	width: 100%;
	height: calc(~'100% - 50px');
}
.mainContent1 {
	border: none;
}
.split-atrr {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.designUili .tips {
	float: right;
	cursor: pointer;
}
// scroll 变化切换 class
&/deep/ .ivu-scroll-container {
	overflow-x: hidden;
}
&/deep/ .scrollMain .ivu-scroll-container {
	overflow-y: hidden;
}
.designUili {
	list-style: none;
	// border-bottom: 1px solid  rgba(220, 222, 226, 1);
	padding: 0 8px 0 16px;
	position: relative;
}
.designUili1 {
	padding: 18px 8px 18px 16px;
}
&/deep/ .designUili1 .ivu-btn {
	padding: 0 15px 0 15px !important;
}
&/deep/ .ivu-scroll-loader {
	height: 0;
}
.ivScrollb ::-webkit-scrollbar {
	display: none;
}
.tips1 {
	display: inline-block;
	position: absolute;
	right: 12px;
	top: 2px;
}
.tips2 {
	color: #f59a23;
	position: absolute;
	right: 14px;
	top: 7px;
}
.titleOnOff {
	width: 100%;
	height: 100%;
	transition: color 0.2s linear, background-color 0.2s linear,
		border 0.2s linear, box-shadow 0.2s linear;
	border: 1px dashed #2d8cf0;
	color: #2d8cf0;
	.titleTip {
		size: 28px;
	}
}

.designColorLi {
	background: #2d8cf0 !important;
	color: #ffffff !important;
}
.designColorLi1 {
	transition: color 0.2s linear, background-color 0.2s linear;
}
.designColorLi1:hover {
	background: #e9f4ff;
	color: #515a6e;
}
.designUiContent {
	border-radius: 4px;
	padding: 6px;
	position: relative;
}
.designUiContent1 {
	cursor: pointer;
}
.ui-design-content-ul {
	padding-bottom: 12px;
}
.design-icon {
	position: relative;
	top: 0px;
}
.design-empy {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-flow: column;
}
.empy-img {
	width: 204px;
	height: 179px;
	background: url('../../../assets/design/Group 49.png') no-repeat;
	background-position: center center;
}
</style>